import React, { useState, useReducer, useEffect } from 'react'
import { Toast } from '_antd-mobile@2.3.4@antd-mobile'
import Header from '../../components/Headers/Headers'
import { reqDelCate } from '../../request/api'
import './order.css'
export default function Order(props) {
    const [arr, setArr] = useState([])
    let orderArr = JSON.parse(sessionStorage.getItem("OrderGoods"))
    useEffect(() => {
        setArr(orderArr)
    }, [])
    
    let aPrice =arr.reduce((prve,item)=>{
        return prve+item.price*item.num
    },0)
    let submit =()=>{
        arr.forEach(item=>{
            reqDelCate({id:item.id}).then(res=>{

            })
        })
        sessionStorage.removeItem("OrderGoods")
        Toast.info("提交成功",1,()=>{},false)
        props.history.replace("/index/mall")
    }
    return (
        <div className="orderWrap">
            <Header title="确认订单" back={true} {...props}></Header>
            {
                arr.map(item=>{
                    return (<div className="shopnum" key={item.id}>
                    <div className="shopnum01 sn01">
                        <div className="shop_l">
                            <img src={item.img} alt="" />
                            <div className="sh_text">
                                <div className="sh_t_t">{item.goodsname}</div>
                                <div className="sh_t_b">规格：50g</div>
                            </div>
                        </div>
                        <div className="shop_r">
                            &yen; <span>{item.price}</span>
                        </div>
                    </div>
                    <div className="shopnum01 sn02">
                        <div className="num_l">购买数量 :</div>
                        <div className="num_r">
                            <div className="plus">
                                {/* <<span className="span01">&minus;</span>*/}
                                <span className="span02">{item.num}</span>
                                {/* <span className="span01">&plus;</span> */}
                            </div>
                        </div>
                    </div>
                    <div className="shopnum02 sn03">
                        <div className="delivery_l">配送方式</div>
                        <div className="delivery_2">XX快递</div>
                    </div>
                </div>)
                })
            }
            <div className="discount">
                <div className="coupon">
                    <div className="coupon_l">优惠券</div>
                    <div className="coupon_r">无可用</div>
                </div>
                <div className="points">
                    <div className="ponints_l">
                        <span>使用积分</span>
                        <div className="inp">
                            <input type="text" placeholder="输入积分" />
                            <div className="btn">使用</div>
                        </div>
                    </div>
                    <div className="ponints_r">可用<span>50</span>积分</div>
                </div>
            </div>
            <div className="total">
                <div className="total_01">
                    <div className="total_text">商品金额</div>
                    <div className="total_num">&yen;{  }</div>
                </div>
                <div className="total_01">
                    <div className="total_text">运费</div>
                    <div className="total_num">&plus;&yen;0.00</div>
                </div>
                <div className="total_01">
                    <div className="total_text">优惠券</div>
                    <div className="total_num">&minus;&yen;0.00</div>
                </div>
                <div className="total_01">
                    <div className="total_text">会员优惠</div>
                    <div className="total_num">&minus;&yen;0.00</div>
                </div>
                <div className="total_01">
                    <div className="total_text">积分抵扣</div>
                    <div className="total_num">&minus;&yen;0.00</div>
                </div>
            </div>
            <div className="really">
                实际金额 : <span>&yen;{ aPrice }</span>
            </div>
            <div className="submit_order">
                <div className="submit" onClick={() => submit()}>提交订单</div>
            </div>
        </div>
    )
}
